<template>
  <div class="d3line">
      <div id="tabs-0"></div>
  </div>
</template>
<script>
  import * as d3 from 'd3';
  // const data = [99, 71, 78, 25, 36, 92];
  export default {
     data() {
      return {
        urlData:[{url:require('../../assets/img/topo-4.png'),title:'你看我叼吗1',id:1},
      {url:require('../../assets/img/topo-4s.png'),title:'你看我叼吗2',id:2},
      {url:require('../../assets/img/topo-14.png'),title:'你看我叼吗3',id:3},
      {url:require('../../assets/img/topo-14s.png'),title:'你看我叼吗4',id:4},
      {url:require('../../assets/img/topo-4.png'),title:'你看我叼吗5',id:5}

      
        ],
        data : [{ "label": "chocolate", "text": "Chocolate Cookie", "img": require('../../assets/img/topo-4.png') },
        { "label": "sugar", "text": "Sugar Cookie", 'img':require('../../assets/img/topo-4s.png')  }],
				draggingDev:true,
				dragging:true,
				isDraged:false,
				node:''
      };
    },
    name: 'non-vue-line-chart',
    template: '<div></div>',
    mounted() {
      // console.log(this.$el)
      // const svg = d3.select(this.$el)
      //   .append('svg')
      //   .attr('width', 500)
      //   .attr('height', 270)
      //   .append('g')
      //   .attr('transform', 'translate(0, 10)');
      // const x = d3.scaleLinear().range([0, 430]);
      // const y = d3.scaleLinear().range([210, 0]);
      // d3.axisLeft().scale(x);
      // d3.axisTop().scale(y);
      // x.domain(d3.extent(data, (d, i) => i));
      // y.domain([0, d3.max(data, d => d)]);
      // const createPath = d3.line()
      //   .x((d, i) => x(i))
      //   .y(d => y(d));
      // svg.append('path').attr('d', createPath(data));
      this.drawTopu()
    },
    methods: {
      drawTopu() {
        var that = this;
        // console.log(that)
        var width = document.querySelector("body").offsetWidth,
          height = document.querySelector("body").offsetHeight,
          shiftKey;
        var flag = height - 400;
        // $("#tabs-0").html("");
        //选择#tabs-0
        const svg = d3.select("#tabs-0")
          //		保留代码 勿删
          //	    .attr("tabindex", 1)
          //	    .on("keydown.brush", keydown)
          //	    .on("keyup.brush", keyup)
          // 为每一个选择的绑定函数
          // svg.each(function () {
          //   this.focus();
          // })
          // 添加子元素   为svg注册zoom函数 解除事件监听
         .append("svg")//  .call(zoom).on("dblclick.zoom", null).on("mousedown.zoom", null)
        //   .on("touchstart.zoom", null)
        //   .on("touchmove.zoom", null)
        //   .on("touchend.zoom", null)
        //   // 给svg添加宽高
          .attr("width", width)
          .attr("height", height);

        // link = svg.append("g")
        //   .attr("class", "links")
        //   .selectAll("line");

        // brush = svg.append("g")
        //   .datum(function () {
        //     return {
        //       selected: false,
        //       previouslySelected: false
        //     };
        //   })
        //   .attr("class", "brush");

        let node = svg.append("g")
          .attr("class", "equips")
          .selectAll(".equip");
        let texts = svg.append("g")
          .attr("class", "nodetexts")
          .selectAll(".nodetext");
        // link   = link.data(links).enter().append("line")
        //   .attr("x1", function (d) {
        //     return findNode(d.startfromdeviceid).xpoint;
        //   })
        //   .attr("y1", function (d) {
        //     return findNode(d.startfromdeviceid).ypoint;
        //   })
        //   .attr("x2", function (d) {
        //     return findNode(d.endwithdeviceid).xpoint;
        //   })
        //   .attr("y2", function (d) {
        //     return findNode(d.endwithdeviceid).ypoint;
        //   })
        //   .attr("class", function (d) {
        //     if (d.linkstatus == 1 || d.linkstatus == "1" || d.linkstatus == 0 || d.linkstatus == "0") {
        //       return "link";
        //     } else {
        //       return 'link link_error';
        //     }
        //   }).attr("id", function (d) {
        //     return "tp_link" + d.linkid;
        //   }).attr("stroke-width", function (d) {
        //     return 5;
        //   }).on('click', function (d, i) {
        //     var m = d3.mouse(this);
        //     if (!selecting) {
        //       linkbind = d.linkBind;
        //       showLinkMenu(d, m);
        //       hideDevMenu();
        //     }
        //   });
        // /*on("mouseover",function(d,i){
        // 	  	  var m = d3.mouse(this);
        // 	  	  if(!selecting){
        // 	  		linkbind = d.linkBind;
        // 	  		  showLinkMenu(d,m);
        // 	  	  }
        // 	    }).on("mouseout",function(){
        // 	  	  hideLinkMenu();
        // 	    })*/
        // ;
        // //开始画设备
        // var nodes = ['a','b','c','d','e']
       
        // var 
        // var enter = node.data(nodes).enter();
        // // enter()占位符节点，对应data生成相应的image添加到svg下面的equip中
        that.node = node.data(this.data).enter().append("div")
    .attr("id", function(d) { return d.label; }).attr('width',50).attr('height',50)
    .each(function(d) {
        d3.select(this).append("p")
          .text(d.text);
        d3.select(this).append("img")
          .attr("src", d.img);
    })
        // .append("svg:image")
        // //   // 添加equip类名，根据icareID添加id
        //   .attr("class", "equip")
        //   .attr("id", function (d) {
        //     return "ic" + 1;
        //   })
        //   .attr("xlink:href", function (d) {
        //     var img = "";
        //     //根据类型来使用图片
        //     // if (d.icaretype == 1 && d.probetype) {
        //     //   img = ctx + "/img/mapIndex/topo-" + d.icaretype + "-" + d.probetype + ".png";
        //     // } else {
        //     //   img = ctx + "/img/mapIndex/topo-" + d.icaretype + ".png";
        //     // }
        //     // if (d.icareStatus == 2) {
        //     //   img = img.substring(0, img.lastIndexOf(".")) + "s" + ".png";
        //     // }
        //     for(let i = 0; i<that.urlData.length;i++){
        //     img = that.urlData[i].url
        //     var imgs = [];
        //     imgs.push(img)
            
        // }

        //     return imgs;
        //   })
          .attr("width", 32 + "px")
          .attr("height", 32 + "px")
          .attr("x", function () {
            let num = Math.random()*1000
            return parseInt(num);
          })
          .attr("y", function () {
           let num = Math.random()*1000
            return parseInt(num);
          })
          .on("mousedown", function (d) {
            console.log('--mousedown--');
            // hideDevMenu();
          //  var draggingDev = true;
          //   if (!d.selected) { // Don't deselect on shift-drag.
          //     if (!shiftKey) node.classed("selected", function (p) {
          //       return p.selected = d === p;
          //     });
          //     else d3.select(this).classed("selected", d.selected = true);
          //   }
          //   node.on("mouseover", null);
          //   node.on("mouseout", null);
          })
        //   .on("mouseup", function (d) {
        //     console.log("--mouseup--");
        //     draggingDev = false;
        //     if (d.selected && shiftKey) d3.select(this).classed("selected", d.selected = false);

        //     node.on("mouseover", function (d) {
        //       /*console.log("--node.on(mouseover--)" + selecting);
        //       var m = d3.mouse(this);
        //       if (!selecting) {
        //           showDevMenu(d, m);
        //           $("#devTab1").addClass("devTab");
        //           $("#devTab2").removeClass("devTab");
        //       }*/
        //     });
        //     node.on("mouseout", function () {
        //       /*console.log("--mouseout--");
        //       hideDevMenu();*/
        //     });
        //   })
        //   /*.on("mouseover",function(d){
        //   	var m = d3.mouse(this);
        //   	if(!selecting){
        //   		showDevMenu(d,m);
        //   		$("#devTab1").addClass("devTab");
        //   		$("#devTab2").removeClass("devTab");
        //   	}
        //   }).on("mouseout",function(){
        //   	console.log("--mouseout--");
        //   	hideDevMenu();
        //   })*/
          .on("click", function (d) {
            console.log("--click--lalala");
						// d3.select(this).classed("selDev")
//             if (selecting && !d3.select(this).classed("selDev")) {
//               console.log('--selDevForTask--');
//               selDevForTask(d);
//               updateSelDev(d3.select(this), d, 1);
//             } else if (selecting && d3.select(this).classed("selDev")) {
//               console.log('--removeDevForTask--');
//               removeDevForTask(d);
//               updateSelDev(d3.select(this), d, 0);
//             } else {
//               var m = d3.mouse(this);
//               if (!selecting) {
//                 if (isDraged) {
//                   isDraged = false;
//                 } else {
//                   showDevMenu(d, m);
//                   $("#devTab1").addClass("devTab");
//                   $("#devTab2").removeClass("devTab");
//                   hideLinkMenu();
//                   isDraged = false;
//                 }
//               }
//             }
           })
          .call(d3.drag()
            .on("drag", function (d) {
							console.log(that)
              that.nudge(d3.event.dx, d3.event.dy);
            })
           );

        // //增加设备名称
        // // d3中data方法将拿到的数据绘制成dom
        // texts = texts.data(nodes).enter().append("svg:text")
        //   .attr("id", function (d) {
        //     return "txt" + d.icareID;
        //   })
        //   .attr("class", "nodetext")
        //   // 这里dx，dy都是将文本相对默认锚点做的偏移。
        //   .attr("dx", function (d) {
        //     return parseInt(d.xpoint) - 10;
        //   })
        //   .attr("dy", function (d) {
        //     return parseInt(d.ypoint) + 30;
        //   })
        //   // 填充颜色即字体颜色
        //   .style("fill", "#FFFFFF")
        //   .text(function (d) {
        //     return d.icareName;
        //   });

				// console.log(that.node)
				this.node = that.node._groups[0]; 
      },
					//拖动设备
			 nudge(dx, dy) {
				this.isDraged = true;
				// console.log(this.node)
			    this.node.filter(function(d) { console.log(d) })
			        .attr("x", function(d) {
			            d.xpoint = parseInt(d.xpoint) + dx;
			            return parseInt(d.xpoint) - 35 / 2;
			        })
			        .attr("y", function(d) {
			            d.ypoint = parseInt(d.ypoint) + dy;
			            return parseInt(d.ypoint) - 35 / 2;
			        });
			
// 			    link.filter(function(d) { return findNode(d.startfromdeviceid).selected; })
// 			        .attr("x1", function(d) { return findNode(d.startfromdeviceid).xpoint; })
// 			        .attr("y1", function(d) { return findNode(d.startfromdeviceid).ypoint; });
// 			
// 			    link.filter(function(d) { return findNode(d.endwithdeviceid).selected; })
// 			        .attr("x2", function(d) { return findNode(d.endwithdeviceid).xpoint; })
// 			        .attr("y2", function(d) { return findNode(d.endwithdeviceid).ypoint; });
// 			
// 			    texts.filter(function(d) { return d.selected; })
// 			        .attr("dx", function(d) { return parseInt(d.xpoint) - 10; })
// 			        .attr("dy", function(d) { return parseInt(d.ypoint) + 30; });
			    //  d3.event.preventDefault();
			}
    }

  };

</script>
<style >
body{
  height: 1000px;
}
   /* svg {
   margin: 25px;
  }
svg image{
  background-color: #666;
  z-index: 10000;
}
   path {
   fill: none;
     stroke: #76BF8A;
    stroke-width: 3px; 
 }*/

</style>
